<template>
  <div class="city-header">
    <div class="top-header">
      <a href="/">&#xe624;</a>
      <div class="title">城市选择</div>
    </div>
    <input type="search" placeholder="输入城市名或拼音" v-model="searchValue" />
    <ul class="search-content" v-show="searchValue">
      <li class="search-item" v-for="item in searchList" :key="item"
      >{{ item.name }}</li>
      <li class="search-item" v-show="!searchList.length">没有找到匹配数据</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, defineProps, watch } from 'vue'
const props = defineProps({
  cities: {
    type: Object,
    default: () => ({})
  }
})
const searchValue = ref('')
const searchList = ref([])
watch(() => searchValue.value, (val) => {
  let timer = null
  if (timer) { clearTimeout(timer) }
  if (!val) {
    searchList.value = []
    return
  }
  timer = setTimeout(() => {
    const result = []
    for (let i in props.cities) {
      props.cities[i].forEach((value) => {
        if (value.name.indexOf(val) > -1 || value.spell.indexOf(val) > -1) {
          result.push(value)
        }
      })
    }
    return searchList.value = result
  }, 500)
})
</script>

<style lang="scss" scoped>
.city-header {
  position: relative;
  width: 100%;
  background-color: $bgColor;
  text-align: center;
  font-size: .36rem;
  font-weight: 600;
  color: #fff;
  padding-bottom: .1rem;
  .top-header {
    height: $headerHeight;
    a {
      position: absolute;
      top: 0;
      left: 0;
      line-height: $headerHeight;
      font-family: "iconfont";
      color: #fff;
      padding-left: .1rem;
    }
    .title {
      line-height: $headerHeight;
    }
  }
  input {
    width: 98%;
    background-color: #fff;
    font-size: .36rem;
    text-align: center;
    color: #333;
    font-family: "PingFang SC";
    border-radius: .1rem;
    padding: .1rem;
  }
  .search-content {
    box-sizing: border-box;
    font-size: .30rem;
    font-weight: 400;
    background-color: #eee;
    color:#333;
    .search-item {
      border-bottom: 1px solid #ccc;
      padding: .1rem;
    }
  }
}
</style>
